身為前端工程師，日常在開發 React / Vue / Next.js 專案串接後端 API 時，最常遇到兩個非常消耗時間的痛點：

1. 想測試 UI 的錯誤邊界（Error Boundary）與 Loading 狀態很難模擬：
   當後端 API 正常運作時，想測試前端收到 401 Unauthorized、403 Forbidden、500 Internal Server Error，或是網路延遲 3000ms 時的 Skeleton 畫面，往往要自己去改前端程式碼塞假資料，或是額外架設繁瑣的 Proxy / MSW。
2. 面對複雜巢狀的 API JSON 回應，手寫 TypeScript interface 與 Zod Schema 超級繁瑣：
   每次拿到新的 API Response，都要人工一層一層對型別、處理陣列聯合型別與 Optional 欄位。

為了把這兩件事整合進同一個順手的工作流，我用 Chrome Manifest V3 開發了一款長駐在瀏覽器右側邊欄（SidePanel）的開發者工具 —— API Craft Pro。

核心功能與設計亮點

1. 📡 Live Traffic：不佔畫面的 SidePanel 即時流量攔截

不用再把 F12 Network 面板擠在狹小的畫面裡，透過雙世界（Main World document_start + Isolated World）非侵入式攔截網頁上的 window.fetch 與 XMLHttpRequest，即時在右側邊欄顯示所有 API 的 Method、Status Code、耗時與格式化後的 JSON Payload。

2. 🎭 Mock Studio：一鍵將真實 API 轉為 Mock 規則與延遲模擬

在 Live Traffic 看到任何一筆請求，只要點一下 「➕ 轉為 Mock 規則」：

• 自訂 HTTP 狀態碼：一鍵切換 200、201、400、401、403、404、500，立即測試前端的錯誤處理與 Token 過期邏輯。
• 模擬網路延遲（Latency Simulation）：可自訂 0ms ～ 60,000ms 的回應延遲，輕鬆驗證 Loading Spinner 與 Timeout 機制。
• 支援字串包含與 /Regex/ 路由匹配：就算是帶有動態 ID 的路徑（如 /api/v1/users/123）也能精準攔截並替換回傳的 JSON Body。

3. 🛠️ AST Code Gen：一鍵生成 TypeScript Interface、Zod Schema 與 Typed Fetch

選取任何一筆攔截到的真實 API 回應（或直接貼上自訂 JSON），內建的純前端 AST 型別推導引擎會瞬間產出：

• TypeScript Interfaces（自動拆分巢狀物件並推論陣列內的選填 ? 欄位）
• Zod Validation Schemas（直接複製進專案做執行期資料驗證）
• Draft-07 JSON Schema 與 Typed Async Fetch Client 函式

4. 🔒 100% Local-First 隱私安全

公司專案最在意資安問題。本工具所有攔截到的 API 封包與 Mock 規則，100% 僅儲存在你本地瀏覽器的 chrome.storage.local 中，完全不會上傳到任何外部雲端伺服器。

免費安裝體驗

核心的即時流量監聽、單一規則 API Mock 與 TypeScript Interface 生成器皆完全免費，介面也內建 繁體中文 / 英文 / 日文 切換。

歡迎常需要串接 API 的前端與全端夥伴安裝試用，有任何使用心得或想許願的功能都歡迎在底下留言交流！

👉 Chrome 線上應用程式商店安裝連結：
https://chromewebstore.google.com/detail/amdohgdofjccadgobnalnmaphalloapm